<!--
 * @Author       : Li Ming Yang
 * @Date         : 2023-11-20 13:52:42
 * @Description  : 装修容器组件
-->

<template>
  <view ref="wrap" class="deco-wrap" :class="[wrapClass]" :style="[wrapStyle, wrapCustomStyle]">
    <!-- 顶部栏 -->
    <deco-header-bar v-if="name === 'header-bar'" :data="data" :from="from" :page="page"></deco-header-bar>
    <!-- 个人中心 顶部栏 -->
    <deco-person-head-bar v-if="name === 'person-head-bar'" :data="data" :from="from" :page="page"></deco-person-head-bar>
    <!-- 顶部背景 -->
    <deco-top-background v-if="name === 'top-background'" :data="data" :from="from" :page="page"></deco-top-background>
    <!-- 轮播图 -->
    <deco-banner v-if="name === 'banner'" :data="data" :from="from" :page="page"></deco-banner>
    <!-- 标题栏 -->
    <deco-title-text v-if="name === 'title-text'" :data="data" :from="from" :page="page"></deco-title-text>
    <!-- 电影列表 -->
    <deco-film-list v-if="name === 'film-component'" :data="data" :from="from" :page="page"></deco-film-list>
    <!-- 资讯列表 -->
    <deco-information v-if="name === 'information-component'" :data="data" :from="from" :page="page"></deco-information>
    <!-- 面板导航 -->
    <deco-panel-navigation v-if="name === 'panel-navigation'" :data="data" :from="from" :page="page"></deco-panel-navigation>
    <!-- 按钮导航 -->
    <deco-button-navigation v-if="name === 'button-navigation'" :data="data" :from="from" :page="page"></deco-button-navigation>
    <!-- 个人中心 用户信息栏 -->
    <deco-person-info-bar v-if="name === 'person-info-bar'" :data="data" :from="from" :page="page"></deco-person-info-bar>
    <!-- 个人中心 我的资产栏 -->
    <deco-person-property-bar v-if="name === 'person-property-bar'" :data="data" :from="from" :page="page"></deco-person-property-bar>
    <!-- 个人中心 会员栏 -->
    <deco-person-vip-bar v-if="name === 'person-vip-bar'" :data="data" :from="from" :page="page"></deco-person-vip-bar>
    <!-- 个人中心 订单栏 -->
    <deco-person-order-bar v-if="name === 'person-order-bar'" :data="data" :from="from" :page="page"></deco-person-order-bar>
    <!-- 个人中心 服务栏 -->
    <deco-person-service-bar v-if="name === 'person-service-bar'" :data="data" :from="from" :page="page"></deco-person-service-bar>
    <!-- 会员模块 送券组件 -->
    <deco-vip-coupon v-if="name === 'vip-coupon'" :data="data" :from="from" :page="page"></deco-vip-coupon>
    <!-- 会员模块 购买按钮组件 -->
    <deco-vip-buy-button v-if="name === 'vip-buy-button'" :data="data" :from="from" :page="page"></deco-vip-buy-button>
    <!-- 问题模块 问题导航组件 -->
    <deco-problem-nav-bar v-if="name === 'problem-nav-bar'"></deco-problem-nav-bar>
    <!-- 问题模块 列表组件 -->
    <deco-problem-classification v-if="name === 'problem-classification'" :data="data" :from="from" :page="page"></deco-problem-classification>
    <!-- 问题模块 底部按钮 -->
    <deco-problem-footer-button v-if="name === 'problem-footer-button'" :data="data" :from="from" :page="page"></deco-problem-footer-button>
    <!-- 默认背景 -->
    <deco-empty-background v-if="name === 'empty-background'" :data="data" :from="from" :page="page"></deco-empty-background>
  </view>
</template>

<script>
import mixins from "@/decoration/mixins"
import { styleSizeUnit } from "@/decoration/utils/style"
export default {
  name: "deco-wrap",
  mixins: [mixins],
  props: {
    name: { type: String, default: "" },
    data: { type: Object, default: () => ({}) },
    page: { type: String, default: "" }
  },
  data() {
    return {
      visible: true
    }
  },
  computed: {
    wrapStyle() {
      const style = {}
      if (!this.visible) style.display = "none"
      return { ...styleSizeUnit(this.data.wrapStyle), ...style }
    },
    wrapCustomStyle() {
      return this.customWrapStyle
    },
    wrapClass() {
      return this.data.name
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.mitt?.on("wrap.setStyle", (data) => {
        if (data?.uuid === this.data?.deco?.uuid) {
          this.customWrapStyle = data.style
        } else {
          this.customWrapStyle = {}
        }
      })

      this.mitt?.on("wrap.resetStyle", (data) => {
        if (data?.uuid === this.data.deco.uuid) {
          this.customWrapStyle = {}
        }
      })
    },
    show() {
      this.visible = true
    },
    hide() {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.deco-wrap {
  z-index: 100;
}
</style>
